<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .comp-a,.comp-b,.comp-c{
            line-height: 40px;
            padding: 10px;
            margin: 10px auto;
            border: 1px dashed #333;
        }
    </style>
</head>
<body>
    <!-- <div dataIndex="1231"></div> -->
    <!-- 根组件 -->
    <div id="app">
        <p>count:{{count}}</p>
        <p><button @click="count++">count++</button></p>
        <hr>    

        <!-- 在父(根)组件中使用子组件 -->
        
        <!-- 父组件在使用子组件laowang-a时,传入静态属性 a ,b (静态属性,键值只能是字符串类型,如果想传入其他类型的数据/父组件中的数据,可以使用v-bind传入动态属性)  -->
        <!-- <laowang-a a="1" b="2"></laowang-a> -->

        <!-- 父组件在使用子组件laowang-b时,传入动态属性 -->
        <!-- <laowang-b :num="100" :str="'hello'" :bool="true" :a="null" :b="undefined" :list="[1,2,3]" :obj="{a:1,b:2}" :count="count"></laowang-b> -->
        
        <laowang-c :data-index="0"  :data-count="count"></laowang-c>
    </div>
</body>
<script>
    /*  

        组件通信: 父传子 (父组件传递数据  子组件接收数据)

        1. 父组件如何传递数据
            a. 父组件在使用子组件时,可以通过在子组件的<>内,通过html属性传递数据,到子组件 


            b. 父组件在使用子组件时,可以通过在子组件标签对内,传递html结构或文本到子组件内 (后面)


        2. 子组件如何收?    
            子组件接收父组件以html属性传递的数据时,需要先在子组件中配置props属性, 对应属性名接收数据 !! 
            a. 子组件在初始化渲染阶段接收数据(在子组件的配置项解析时一并处理), 并将其存储到当前子组件的vue实例中 ($props中也有一份)
            
            b. 使用时直接通过子组件的Vue实例使用即可


            注意:
            1. 父组件传入数据时,如果通过静态属性传入, 接收数据只能是字符串类型
               父组件传入数据时,如果通过动态属性传入(v-bind), 接收数据可以是任意类型的数据,也可以是父组件已有的数据

            2. 父组件传入数据时, HTML属性的属性名建议使用小写和中划线命名法 (html默认会将大写属性名转化为小写)

            3. 子组件接收父组件以中划线命名法格式传递的数据, props中可以通过中划线命名法或小驼峰命名接收, 但是存储到Vue实例上时都是小驼峰命名法
               

    
    */


   

    Vue.component("laowang-a",{
        props:["a","b"],
        template:`<div class="comp-a">
                    这是A组件
                </div>`,
        created () {
            console.log("子组件A",this);    
            console.log("子组件A",this.$props);    
            console.log("子组件A",this.a);    
        }
    })

    Vue.component("laowang-b",{
        props:["num","str","bool","a","b","list","obj","count"],
        template:`<div class="comp-b">
                    这是B组件 {{count}}
                </div>`,
        created () {
            console.log("子组件B",this);    
            console.log("子组件B",this.$props);    
            // console.log("子组件C",this.a);   
        }
    })

    Vue.component("laowang-c",{
        props:["data-index","dataCount"],
        template:`<div class="comp-c">
                    这是C组件
                </div>`,
        created () {
            console.log("子组件C",this);    
            console.log("子组件C",this.$props);    
        }
    })
   

    // 根组件 => 挂载到页面最外层中 (所有组件,都是根组件的子组件)
    var vm = new Vue({
        el:"#app",
        data:{
            count:1,
        }
    })



</script>
</html>